<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>华哥来了</title>
  <style>
    .title {
      background-color: blueviolet;
      color: white;
    }

    .active {
      color: skyblue;
    }

    .pink {
      color: pink;
    }

    .yellow {
      color: yellow;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 显示标题 -->
    <span class="title">华哥来了</span>

    <!-- 动态设置段落的字体颜色，根据data中的color属性变化 -->
    <p :class="color">华哥来了</p>

    <!-- 按钮，点击触发handleClick方法 -->
    <button @click="handleClick">按钮</button>

    <!-- 列表项，使用数据驱动，通过is*Active属性控制选中状态 -->
    <ul>
      <li :class="{active: isEatActive}" @click="setActive('Eat')">吃饭</li>
      <li :class="{active: isSleepActive}" @click="setActive('Sleep')">睡觉</li>
      <li :class="{active: isCodeActive}" @click="setActive('Code')">敲代码</li>
    </ul>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    // 创建Vue实例
    const vm = new Vue({
      el: "#app",
      data: {
        // 初始化数据
        color: "pink", // 默认字体颜色
        isEatActive: false,
        isSleepActive: false,
        isCodeActive: false,
      },
      methods: {
        // 点击按钮时切换颜色
        handleClick() {
          this.color = this.color === "pink" ? "yellow" : "pink";
        },
        // 根据传入的标志设置对应的is*Active属性
        setActive(flag) {
          this.isEatActive = false;
          this.isSleepActive = false;
          this.isCodeActive = false;

          this[`is${flag}Active`] = true;
        },
      },
    });
  </script>
</body>

</html>